<template>
  <div>
    <h1 @click="reversedMsg">{{ msg }}</h1>
    <h2>data 状态 & 事件处理</h2>
    <DataComponent/>
    <h2>computed 计算属性 & watch 侦听器</h2>
    <h3>{{ reversedX3 }}</h3>
    <h2>生命周期</h2>
  </div>
</template>

<script setup> // setup()
import DataComponent from "@/components/vue3/DataComponent";
import { ref, computed, watch, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'

const msg = ref('Vue3 学习')
const reversedMsg = () => {
  msg.value = msg.value.split('').reverse().join('')
}

const reversedX3 = computed(() => msg.value.repeat(3))
watch(msg, (to, from) => {
  console.log('to: ', to)
  console.log('from: ', from)
})

console.log("setup() 相当于 beforeCreate 和 created")
onMounted(() => {
  console.log("onMounted ===> mounted")
})
onBeforeMount(() => {
  console.log("onBeforeMount ===> beforeMount")
})
onBeforeUpdate(() => {
  console.log("onBeforeUpdate ===> beforeUpdate")
})
onUpdated(() => {
  console.log("onUpdated ===> updated")
})
</script>
<!--
<script>
import DataComponent from "@/components/vue3/DataComponent";
import { ref, computed, watch, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'

export default {
  name: "Vue3View",
  setup() {
    const msg = ref('Vue3 学习')
    const reversedMsg = () => {
      msg.value = msg.value.split('').reverse().join('')
    }

    // 计算属性
    const reversedX3 = computed(() => msg.value.repeat(3))
    // 侦听器
    watch(msg, (to, from) => {
      console.log('to: ', to)
      console.log('from: ', from)
    })

    // 生命周期
    // setup() 相当于 beforeCreate 和 created
    console.log("setup() 相当于 beforeCreate 和 created")
    onMounted(() => {
      console.log("onMounted ===> mounted")
    })
    onBeforeMount(() => {
      console.log("onBeforeMount ===> beforeMount")
    })
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate ===> beforeUpdate")
    })
    onUpdated(() => {
      console.log("onUpdated ===> updated")
    })

    return { msg, reversedMsg, reversedX3 }
  },
  components: {
    DataComponent,
  }
}
</script>
-->

<style scoped>

</style>